<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增外部扩展数据源')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-extDatasource-add">
			<div class="form-group">	
				<label class="col-sm-3 control-label">名称：</label>
				<div class="col-sm-8">
					<input id="dsName" name="dsName" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">中文名称：</label>
				<div class="col-sm-8">
					<input id="dsCnName" name="dsCnName" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">类型：</label>
				<div class="col-sm-8">
					<select id="type" name="type" th:with="type=${@dict.getType('sys_ds_type')}">
							<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
					</select>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">驱动类：</label>
				<div class="col-sm-8">
					<input id="driver" name="driver" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">url：</label>
				<div class="col-sm-8">
					<input id="url" name="url" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">用户名：</label>
				<div class="col-sm-8">
					<input id="username" value='root' name="username" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">密码：</label>
				<div class="col-sm-8">
					<input id="password" value='root' name="password" class="form-control" type="password">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">状态：</label>
				<div class="col-sm-8">
					<div class="onoffswitch">
                         <input type="checkbox" th:checked="true" class="onoffswitch-checkbox" id="state">
                         <label class="onoffswitch-label" for="state">
                             <span class="onoffswitch-inner"></span>
                             <span class="onoffswitch-switch"></span>
                         </label>
                     </div>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">备注信息：</label>
				<div class="col-sm-8">
					<input id="remark" name="remark" class="form-control" type="text">
				</div>
			</div>
		</form>
	</div>
    <div th:include="include::footer"></div>
    <script type="text/javascript">
		var prefix = ctx + "system/extDatasource"
		$("#form-extDatasource-add").validate({
			rules:{
				dsName:{
					required:true
				},
				username:{
					required:true
				},
				password:{
					required:true
				}
			},
			messages:{
				"dsName":{
					remote:"请输入名称"
				},
				"username":{
					romote:"请输入用户名"
				},
				"password":{
					remote:"请输入密码"
				}
				
			},
			focusCleanup: true
		});
		
		function submitHandler() {
	        if ($.validate.form()) {
	        	var data = $('#form-extDatasource-add').serializeArray();
	        	var state = $("input[id='state']").is(':checked') == true ? 0 : 1;
	        	
	        	data.push({"name": "state", "value": state});
	        	$.operate.save(prefix + "/add", data);
	        }
	    }
		
		function submitExtHandler() {
			
	        if ($.validate.form()) {
	        	var data = $('#form-extDatasource-add').serializeArray();
	        	var state = $("input[id='state']").is(':checked') == true ? 0 : 1;
	        	data.push({"name": "state", "value": state});
	        	for (var i in data){
	        		if(data[i].name=='url'){
	        			data[i].value=encodeURI(data[i].value);
	        		}
	        	}
	        	$.operate.post(prefix + "/testConn", data)
	        }
	        return false;
	    }
		
		
		$(document).ready(function(){
			$("#type").val('mysql')
			$("#driver").val('com.mysql.jdbc.Driver');
			$("#url").val('jdbc:mysql://localhost:3306/ms-master?useUnicode=true\&characterEncoding=UTF-8\&serverTimezone=UTC');
		})
		$("#type").change(function(){
			if($(this).val()=='mysql'){
				$("#driver").val('com.mysql.jdbc.Driver');
				$("#url").val('jdbc:mysql://localhost:3306/ms-master?useUnicode=true\&characterEncoding=UTF-8\&serverTimezone=UTC');
			}else if($(this).val()=='oracle'){
				$("#driver").val('oracle.jdbc.OracleDriver');
				$("#url").val('jdbc:oracle:thin:@localhost:1521:orcl');
			}else if($(this).val()=='greenplum'){
				$("#driver").val('org.postgresql.Driver');
				$("#url").val('jdbc:postgresql://192.168.101.206:5432/admin');
			}else if($(this).val()=='sqlserver'){
				$("#driver").val('com.microsoft.sqlserver.jdbc.SQLServerDriver');
				$("#url").val('jdbc:sqlserver://localhost:1433;databaseName=dbname');
			}
		})
	</script>
</body>
</html>
